<!--
 * @Author: 张卓南
 * @Date: 2023-10-18 20:23:54
 * @LastEditTime: 2023-10-21 16:58:46
 * @Description: 
-->
<template>
  <div class="">
    <div
      style="
        height: 440px;
        background-color: rgb(36, 202, 239);
        border-radius: 20px;
      "
    >
      <GoBack>
        <div class="flex flex-col items-center justify-center">
          <div
            class="text-darkBlue dark:text-garyWhite text-22px font-black enter-y"
          >
            用车
          </div>
        </div></GoBack
      >
      <div class="parent">
        <van-button
          round
          class="child"
          @click="useCar('mashang')"
          :type="active == 'mashang' ? 'success' : undefined"
          >马上用车</van-button
        >
        <van-button
          round
          class="child"
          @click="useCar('yuyue')"
          :type="active == 'yuyue' ? 'success' : undefined"
          >预约</van-button
        >
      </div>
    </div>
    <div class="flex justify-center p-8 mt-[-320px]">
      <div class="flex flex-col w-full bg-white card">
        <van-form
          ref="formRef"
          class="flex flex-col items-center"
          @submit="handleSubmit"
          v-if="active == 'mashang'"
        >
          <van-cell center title="上车点" class="enter-y"></van-cell>
          <van-field
            class="enter-y items-center mb-20px !rounded-md"
            v-model="formData.source"
            name="source"
            placeholder="上车点"
          >
            <template #left-icon>
              <van-image :src="shangche" width="1em" height="1em" />
            </template>
          </van-field>

          <van-cell center title="目的地" class="enter-y"></van-cell>
          <van-field
            class="enter-y items-center mb-20px !rounded-md"
            v-model="formData.destination"
            name="destination"
            placeholder="目的地"
          >
            <template #left-icon>
              <van-image :src="mudidi" width="1em" height="1em" />
            </template>
          </van-field>

          <!-- <van-cell center title="出行日期" class="enter-y"></van-cell>
          <van-field
            class="enter-y items-center mb-20px !rounded-md"
            v-model="formData.departureTime"
            name="departureTime"
            placeholder="出行日期"
          >
            <template #left-icon>
              <van-icon name="other-pay" />
            </template>
          </van-field>

          <van-cell center title="截止日期" class="enter-y"></van-cell>
          <van-field
            class="enter-y items-center mb-20px !rounded-md"
            v-model="formData.deadline"
            name="deadline"
            placeholder="截止日期"
          >
            <template #left-icon>
              <van-icon name="underway-o" />
            </template>
          </van-field> -->

          <van-cell center title="往返双城" class="mb-20px enter-y">
            <template #right-icon>
              <van-switch v-model="formData.departureType" />
            </template>
          </van-cell>

          <div class="enter-y w-full px-5px flex justify-between mb-20px">
            <div class="flex flex-col">
              <van-cell title="人数" class="enter-y"></van-cell>
              <van-field
                class="enter-y items-center mb-20px !rounded-md"
                v-model="formData.peopleNum"
                name="peopleNum"
                placeholder="人数"
              >
                <template #left-icon>
                  <Icon>
                    <UserOutlined />
                  </Icon>
                </template>
              </van-field>
            </div>

            <div class="flex flex-col">
              <van-cell title="小件" class="enter-y"></van-cell>
              <van-field
                class="enter-y items-center mb-20px !rounded-md"
                v-model="formData.xiaojian"
                name="xiaojian"
                placeholder="小件"
              >
                <template #left-icon>
                  <van-image :src="xingli" width="1em" height="1em" />
                </template>
              </van-field>
            </div>
          </div>

          <van-button
            class="enter-y !rounded-md mb-20px"
            type="primary"
            block
            native-type="submit"
            :loading="loading"
          >
            打车
          </van-button>
        </van-form>

        <van-form
          ref="formRef"
          class="flex flex-col items-center"
          @submit="handleSubmit"
          v-if="active == 'yuyue'"
        >
          <van-cell center title="上车点" class="enter-y"></van-cell>
          <van-field
            class="enter-y items-center mb-20px !rounded-md"
            v-model="formData.source"
            name="source"
            placeholder="上车点"
          >
            <template #left-icon>
              <van-image :src="shangche" width="1em" height="1em" />
            </template>
          </van-field>

          <van-cell center title="目的地" class="enter-y"></van-cell>
          <van-field
            class="enter-y items-center mb-20px !rounded-md"
            v-model="formData.destination"
            name="destination"
            placeholder="目的地"
          >
            <template #left-icon>
              <van-image :src="mudidi" width="1em" height="1em" />
            </template>
          </van-field>

          <van-cell center title="出行日期" class="enter-y"></van-cell>
          <van-field
            class="enter-y items-center mb-20px !rounded-md"
            v-model="formData.departureTime"
            name="departureTime"
            placeholder="出行日期"
          >
            <template #left-icon>
              <van-icon name="other-pay" />
            </template>
          </van-field>

          <!-- <van-field
            v-model="formData.departureTime"
            is-link
            readonly
            name="datePicker"
            label="时间选择"
            placeholder="点击选择时间"
            @click="formData.showPicker = true"
          />
          <van-popup v-model:show="formData.showPicker" position="bottom">
            <van-date-picker
              @confirm="onConfirm"
              @cancel="formData.showPicker = false"
            />
          </van-popup> -->

          <van-cell center title="截止日期" class="enter-y"></van-cell>
          <van-field
            class="enter-y items-center mb-20px !rounded-md"
            v-model="formData.deadline"
            name="deadline"
            placeholder="截止日期"
          >
            <template #left-icon>
              <van-icon name="underway-o" />
            </template>
          </van-field>

          <div class="enter-y w-full px-5px flex justify-between mb-20px">
            <div class="flex flex-col">
              <van-cell title="人数" class="enter-y"></van-cell>
              <van-field
                class="enter-y items-center mb-20px !rounded-md"
                v-model="formData.peopleNum"
                name="peopleNum"
                placeholder="人数"
              >
                <template #left-icon>
                  <Icon>
                    <UserOutlined />
                  </Icon>
                </template>
              </van-field>
            </div>

            <div class="flex flex-col">
              <van-cell title="小件" class="enter-y"></van-cell>
              <van-field
                class="enter-y items-center mb-20px !rounded-md"
                v-model="formData.xiaojian"
                name="xiaojian"
                placeholder="小件"
              >
                <template #left-icon>
                  <van-image :src="xingli" width="1em" height="1em" />
                </template>
              </van-field>
            </div>
          </div>

          <van-button
            class="enter-y !rounded-md mb-20px"
            type="primary"
            block
            native-type="submit"
            :loading="loading"
          >
            预约
          </van-button>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import type { FormInstance } from "vant";
import { Icon } from "@vicons/utils";
import { UserOutlined, MobileOutlined } from "@vicons/antd";
import { showToast } from "vant";
import GoBack from "@/components/GoBack.vue";
import { searchCe } from "@/api/server.js";
import shangche from "../../assets/上车.png";
import mudidi from "../../assets/目的地.png";
import  xingli from "../../assets/行李箱.png";
const router = useRouter();
const formRef = ref<FormInstance>();
const loading = ref(false);
const formData = reactive({
  source: "家",
  destination: "武汉软件新城A9栋",
  departureTime: "2023-10-19",
  deadline: "2023-10-19",
  showPicker: false,
  departureType: false,
  peopleNum: "1",
  xiaojian: "",
});

function handleSubmit() {
  formRef.value
    ?.validate()
    .then(async () => {
      try {
        let obj = { ...formData };

        let res = await searchCe({
          ...formData,
          departureType: formData.departureType ? "1" : "0",
        });
        if (res.code == 0) {
          showToast("叫车成功，可在交易记录查看");
          router.back();
        }
      } finally {
        loading.value = false;
      }
    })
    .catch(() => {
      console.error("发布失败");
    });
}
let active = ref("mashang");
function useCar(type: string) {
  active.value = type;
  if (type === "mashang") {
  }
}
onMounted(() => {
  let userInfo = JSON.parse(localStorage.getItem("userInfo") || "");
  formData.passenger = userInfo?.id;
});
</script>

<style scoped lang="less">
:deep(.van-field__left-icon) {
  display: flex;
}
:deep(.van-field__right-icon) {
  display: flex;
}
.card {
  box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06),
    0px 4px 8px -2px rgba(16, 24, 40, 0.1);
  border-radius: 8px;
  padding: 8px;
}
.parent {
  display: flex;
  margin-top: 16px;
  margin-left: 2rem;
}
.parent > .child {
  margin-right: 8px;
}
</style>
